<template class="a">

<div class="container">

  <div class="box-head">
<!--<select class="selector">
<option value="../assets/index.jpg">  </option>
</select>-->

    <input class="input"  v-model="search" ref="input" @focus="showBlack2" type="text" >
    <button class="search-button" @mouseenter="showBlack" @mouseleave="showWhite" @click="searchFor" ref="search-button">
           <svg class="svg" style="width: 20px"><use xlink:href="#svg-magnifier"><symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" id="svg-magnifier"><path d="M995.83 995.833c-37.551 37.556-98.442 37.556-135.998 0L690.1 826.097c-69.779 44.732-152.275 71.438-241.327 71.438C200.93 897.535.003 696.615.003 448.77.003 200.92 200.929 0 448.773 0c247.856 0 448.77 200.92 448.77 448.77 0 89.048-26.7 171.537-71.44 241.334L995.83 859.83c37.556 37.556 37.556 98.448 0 136.004zM448.773 128.218c-177.025 0-320.542 143.517-320.542 320.552 0 177.032 143.511 320.548 320.542 320.548 177.037 0 320.548-143.516 320.548-320.548 0-177.035-143.51-320.552-320.548-320.552zm0 0"></path></symbol></use></svg>
         </button>



      <!-- <button class="search-button" @mouseenter="changeColor" ref="search-button"></button>-->
    </div>

  <div class="box-body">
  <div class="box-body-1">

    <div class="box-little"><a></a></div>
    <div class="box-little"><a></a></div>
    <div class="box-little"><a></a></div>
    <div class="box-little"><a></a></div>
    <div class="box-little"><a></a></div>
    <div class="box-little"><a></a></div>
    <div class="box-little"><a></a></div>


    <div class="box-little"><span class="index-x">社交</span></div>
    <div class="box-little"><a class="xa" href="https://weibo.com/" target="_blank"><img  src="" style="height: 20px">微博</a></div>
    <div class="box-little"><a class="xa" href="https://www.zhihu.com/" target="_blank"><img class="ya" src="" style="height: 20px">知乎</a></div>
    <div class="box-little"><a class="xa" href="https://tieba.baidu.com/" target="_blank"><img class="ya" src="" style="width: 20px">贴吧</a></div>
    <div class="box-little"><a class="xa" href="https://www.douban.com/" target="_blank"><img class="ya" src="" style="width: 20px">豆瓣</a></div>
    <div class="box-little"><a class="xa" href="https://www.jianshu.com/" target="_blank"><img class="ya" src=""><span class="Ca">简书</span></a></div>
    <div class="box-little"><a class="xa" href="https://bbs.hupu.com/" target="_blank"><img class="ya" src=""><span class="Ca">虎扑</span></a></div>


    <div class="box-little"><span class="index-x">购物</span></div>
    <div class="box-little"><a class="xa" href="https://s.click.taobao.com/t?e=m%3D2%26s%3DsY41mHkxW%2BscQipKwQzePCperVdZeJviYlC4t6cuS%2FlyINtkUhsv0IMLki6Ahxm7uu5sqabOzx5D415GGSsrJ4YxhNUZ2i3GtfcNNJWtX5PKJQt1fVHsSsjNlcujFciaXu%2BSOOjatb%2FkxFiXT%2FI5kZuVJ2zJE2c0ERBlh1C2Tb%2FBV7GfGbfBR%2F2HTwXsXrhegoQaTYQ9FC3uS535%2FyVca2gfnelFNxevNc8bcJTqQrHGJe8N%2FwNpGw%3D%3D&amp;pid=mm_44690775_2551950028_111843300231" target="_blank"><img class="ya" src=""><span class="Ca">淘宝网</span></a></div>
    <div class="box-little"><a class="xa" href="https://union-click.jd.com/jdc?e=618%7Cpc%7C&amp;p=JF8BAJ8JK1olXDYDZBoCUBVIMzZNXhpXVhgcDBsJVFRMVnBaRQcLbV5mUBVVDUtNYTELG1hhI04BXEReSzsbD18NG1oUWgUBU11eOEsWAmwJElocXQAyZF5cOAB5Al8KGloQVA4FUl9dOEsQB2kJGF4WWw4HV19tD0seMzRKXgJLAjYyZF1tD0seF2l6WgkBW3QyZF9tCHtIRzJVK1kUXAILZG4" target="_blank"><img class="ya" src=""><span class="Ca">京东</span></a></div>
    <div class="box-little"><a class="xa" href="https://s.click.taobao.com/t?e=m%3D2%26s%3DFl0vJlnGe5UcQipKwQzePCperVdZeJviK7Vc7tFgwiFRAdhuF14FMazBupaR3CCG08qJM1kPvQriCpeCUkeJc8tA8Qks8BYBXdZXtfxfyx18isIqg9litAZn%2By0keumoEC8RQAClYWM0VQjy9y0sgCGFCzYOOqAQ&amp;pid=mm_44690775_2551950028_111843000242" target="_blank"><img class="ya" src=""><span class="Ca">天猫</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.suning.com/" target="_blank"><img class="ya" src=""><span class="Ca">苏宁易购</span></a></div>
    <div class="box-little"><a class="xa" href="https://t.vip.com/09PWIksHqL9" target="_blank"><img class="ya" src=""><span class="Ca">唯品会</span></a></div>
    <div class="box-little"><a class="xa" href="https://s.click.taobao.com/t?e=m%3D2%26s%3D%2FvPJss46UZtw4vFB6t2Z2jAVflQIoZepMljcGUdc4HdyINtkUhsv0NxEdLqdA07YX4g7CKROwevf0HarZjxiH%2BAUSSknqJFUoo5t1u51Y48%2BZh9bh7rjgTU%2B8MpC6KVIlntEOsmn00xRRjj7xTWTDWKwnKbZSFuIfMFitsqmXpTGJe8N%2FwNpGw%3D%3D&amp;union_lens=lensId%3AOPT%401640996629%4021058891_0811_17e13056c29_5575%4001" target="_blank"><img class="ya" src=""><span class="Ca">天猫超市</span></a></div>

    <div class="box-little"><span class="index-x">视频</span></div>
    <div class="box-little"><a class="xa" href="https://v.qq.com/" target="_blank"><img class="ya" src=""><span class="Ca">腾讯视频</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.iqiyi.com/" target="_blank"><img class="ya" src=""><span class="Ca">爱奇艺</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.youku.com/" target="_blank"><img class="ya" src=""><span class="Ca">优酷</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.mgtv.com/" target="_blank"><img class="ya" src=""><span class="Ca">芒果TV</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.bilibili.com/" target="_blank"><img class="ya" src=""><span class="Ca">哔哩哔哩</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.acfun.cn/" target="_blank"><img class="ya" src=""><span class="Ca">AcFun</span></a></div>


    <div class="box-little"><span class="index-x">门户</span></div>
    <div class="box-little"><a class="xa" href="https://www.qq.com/" target="_blank"><img class="ya" src=""><span class="Ca">腾讯网</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.163.com/" target="_blank"><img class="ya" src=""><span class="Ca">网易</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.sina.com.cn/" target="_blank"><img class="ya" src=""><span class="Ca">新浪网</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.sohu.com/" target="_blank"><img class="ya" src=""><span class="Ca">搜狐</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.ifeng.com/" target="_blank"><img class="ya" src=""><span class="Ca">凤凰网</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.cctv.com/" target="_blank"><img class="ya" src=""><span class="Ca">央视网</span></a></div>


    <div class="box-little"><span class="index-x">资讯</span></div>
    <div class="box-little"><a class="xa" href="https://www.toutiao.com/" target="_blank"><img class="ya" src=""><span class="Ca">今日头条</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.myzaker.com/" target="_blank"><img class="ya" src=""><span class="Ca">ZAKER</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.thepaper.cn/" target="_blank"><img class="ya" src=""><span class="Ca">澎湃新闻</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.huanqiu.com/" target="_blank"><img class="ya" src=""><span class="Ca">环球网</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.huxiu.com/" target="_blank"><img class="ya" src=""><span class="Ca">虎嗅网</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.jiemian.com/" target="_blank"><img class="ya" src=""><span class="Ca">界面新闻</span></a></div>


    <div class="box-little"><span class="index-x">发现</span></div>
    <div class="box-little"><a class="xa" href="https://sspai.com/" target="_blank"><img class="ya" src=""><span class="Ca">少数派</span></a></div>
    <div class="box-little"><a class="xa" href="https://sspai.com/" target="_blank"><img class="ya" src=""><span class="Ca">少数派</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.ifanr.com/" target="_blank"><img class="ya" src=""><span class="Ca">爱范儿</span></a></div>
    <div class="box-little"><a class="xa" href="https://jandan.net/" target="_blank"><img class="ya" src=""><span class="Ca">煎蛋</span></a></div>
    <div class="box-little"><a class="xa" href="https://web.okjike.com/" target="_blank"><img class="ya" src=""><span class="Ca">即刻</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.v2ex.com/" target="_blank"><img class="ya" src=""><span class="Ca">V2EX</span></a></div>

    <div class="box-little"><span class="index-x">生活</span></div>
    <div class="box-little"><a class="xa" href="https://www.ctrip.com/?AllianceID=3266840&amp;sid=11711843&amp;ouid=&amp;app=0101F00" target="_blank"><img class="ya" src=""><span class="Ca">携程旅行</span></a></div>
    <div class="box-little"><a class="xa" href="https://s.click.taobao.com/t?e=m%3D2%26s%3DGm7oEnusVU1w4vFB6t2Z2iperVdZeJviv2laukthwYj87chln4Noyn9SnbgK20tjFFkTvi2%2FB8Y5K6aT2N99RST%2F9sdk7Er39O27BBGsLzWFtnIJfWT1ea2bNG02SaLxdZr7RBnLmJpCxv%2FGQvdA7B4N0UWArWnPEQLDuPf6kdx8isIqg9litAZn%2By0keumoqpcUAkhwzhMQ7f61lYpKe0kaGVtp31Rb&amp;union_lens=lensId%3AOPT%401640693946%40213df914_0a95_17e00fad6a2_8a4f%4001" target="_blank"><img class="ya" src=""><span class="Ca">飞猪旅行</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.meituan.com/" target="_blank"><img class="ya" src=""><span class="Ca">美团</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.dianping.com/" target="_blank"><img class="ya" src=""><span class="Ca">大众点评</span></a></div>
    <div class="box-little"><a class="xa" href="https://58.com/" target="_blank"><img class="ya" src=""><span class="Ca">58同城</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.12306.cn/index/" target="_blank"><img class="ya" src=""><span class="Ca">中国铁路</span></a></div>



    <div class="box-little"><span class="index-x">便捷</span></div>
    <div class="box-little"><a class="xa" href="https://www.deepl.com/" target="_blank"><img class="ya" src=""><span class="Ca">DeepL翻译</span></a></div>
    <div class="box-little"><a class="xa" href="https://map.baidu.com/" target="_blank"><img class="ya" src=""><span class="Ca">百度地图</span></a></div>
    <div class="box-little"><a class="xa" href="https://wx.qq.com/" target="_blank"><img class="ya" src=""><span class="Ca">微信网页版</span></a></div>
    <div class="box-little"><a class="xa" href="https://www.kuaidi100.com/" target="_blank"><img class="ya" src=""><span class="Ca">快递查询</span></a></div>
    <div class="box-little"><a class="xa" href="https://cn.office-converter.com/" target="_blank"><img class="ya" src=""><span class="Ca">在线转换</span></a></div>
    <div class="box-little"><a class="xa" href="https://iq.checee.com/" target="_blank"><img class="ya" src=""><span class="Ca">智商测试</span></a></div>

  </div>
  </div>

  <div class="box-bottom"></div>
</div>

</template>

<script>
import {watch} from "vue";

export default {
  name: "GuideView",
  data(){
    return{
      search:''
    }
  },
  props:['bus'],
  watch:{
    search: function (val, oldVal) {
      console.log(val)
      if(this.search !=''){
       this.showBlack()
      }else {
        this.showWhite()
      }
    },
  },
  methods:{
    showBlack(){
      this.$refs["search-button"].style.backgroundColor="#4C4C4C"
    },
    // showBlack2(){
    //     this.$refs["search-button"].style.backgroundColor="#4C4C4C"
    // },
    showWhite(){
      this.$refs["search-button"].style.backgroundColor="#F6F6F6"
    },
    searchFor(){
        window.open("https://www.baidu.com/s?wd="+this.search)
    }


  },

}

</script>

<style scoped>
.box-head {
  width: 1200px;
  height: 300px;
  /*border: 1px solid #000;*/
  margin:0 auto;
  background-color: #FFFFFF;
}
.box-body{
  width: 1200px;
  height: 600px;
  /*border: 1px solid #000;*/
  margin:0 auto;
 background-color: #F5F3F5;

}
.box-body-1{
  width: 1100px;
  height: 500px;
  /*border: 1px solid #000;*/
  margin:0 auto;

}
.container{
  background-color: #F6F6F6;
  width: 100%;
  height: 100%;
}
.input{
  width: 350px;
  height: 50px;
  margin-top: 120px;
  background:#F6F6F6 ;
  border: none;
  outline:none;
  font-size: 15px;
  font-family: 微软雅黑;
}
.box-little{
  width:155px;
  height: 52px;
  /*border: 1px solid #000;*/
  float: left;
}
.xa {
  position: relative;
  display: inline-flex;
  text-decoration: none;
  max-width: 100%;
  padding: 8px;
  border-radius: var(--corner-radius);
  overflow: hidden;
  transition: background .1s ease-out;
  color: black;
  /*font-family: 新宋体;*/
}
.box-input{
  border: solid;
}
.ya {
  width:20px;
  height:20px;
  margin-right:8px
}
.index-x{
  font-size: 15px;
  float: left;
  color: #888888;
}
.search-button {
  width: 60px;
  height: 52px;
  /*position: relative;*/
  position: absolute;
  margin-top: 120px;
  background-color: #F6F6F6;
  /*border: solid;*/
  border: none;
 /*float: right;*/
}
.svg {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  fill: currentColor;
  overflow: hidden;

}
.logo{
  width: 10px;
  height: 10px;
  /*position: absolute;*/
}
.selector{
  width: 80px;
  height: 51px;
  border: none;
  background-color: #F6F6F6;
}

</style>